<template>
  <el-tabs v-loading="loading" type="border-card" class="tabs-1" @tab-click="SetOptionflag">
    <el-tab-pane label="本支部">
      <el-tabs tab-position="left" class="tabs-2" @tab-click="ChangeDxzinfo">
        <el-tab-pane label="支部委员">
          <Table
            :table-zzjg="TableData_zzjg_zw"
            :optioncol="optionflag"
            :is-edit.sync="isEdit"
            :dialog-form-visible.sync="dialogFormVisible"
            :title.sync="title"
            :zzjg_form.sync="zzjg_form"
            :page.sync="page"
            :total-count="totalCount"
          />
        </el-tab-pane>
        <!-- 党小组信息 -->
        <el-tab-pane v-for="item in dxz_num" :key="item.id" :label="item.name" :name="item.name">
          <Table
            :table-zzjg="TableData_zzjg_dxz "
            :optioncol="optionflag"
            :is-edit.sync="isEdit"
            :dialog-form-visible.sync="dialogFormVisible"
            :title.sync="title"
            :zzjg_form.sync="zzjg_form"
            :page.sync="page"
            :total-count="totalCount"
          />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <!-- 浏览其他支部的信息 这里的其他支部后面用参数代替-->
    <el-tab-pane label="其他支部">
      <el-card>
        <CompanySelector />
      </el-card>
      <el-tabs tab-position="left" class="tabs-2" @tab-click="ChangeDxzinfo">
        <el-tab-pane label="支部委员">
          <Table
            :table-zzjg="TableData_zzjg_zw"
            :optioncol="optionflag"
            :is-edit.sync="isEdit"
            :dialog-form-visible.sync="dialogFormVisible"
            :title.sync="title"
            :zzjg_form.sync="zzjg_form"
            :page.sync="page"
            :total-count="totalCount"
          />
        </el-tab-pane>
        <el-tab-pane v-for="item in dxz_num" :key="item.id" :label="item.name" :value="item.name">
          <Table :table-zzjg="TableData_zzjg_dxz" :page.sync="page" :total-count="totalCount" />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <el-button type="text" @click="handleAdd">添加人员</el-button>
    <el-dialog v-if="dialogFormVisible" :title="title" :visible.sync="dialogFormVisible">
      <Form :isedit="isEdit" :zzjg-form.sync="zzjg_form" />
    </el-dialog>
  </el-tabs>
</template>
<script>
import '@/styles/el-tabs.scss'
import {
  SelectZzmm,
  getUsersInfo,
  postZhiwei,
  getGroupNum,
  getLaborArray
} from '@/api/zzxt'
export default {
  name: 'Zzjg',
  components: {
    Table: () => import('./Table'),
    CompanySelector: () => import('@/components/Company/CompanySelector'),
    Form: () => import('./Form')
  },
  data: () => ({
    loading: false,
    TabsTop: ['本支部'],
    TabLeft: ['支部委员'],
    zzjg_form: {},
    TableData_zzjg_zw: [],
    laborArray: [],
    category: [],
    dxz_num: [],
    TableData_zzjg_dxz: [],
    dialogFormVisible: false,
    isEdit: true,
    title: '添加人员信息',
    formLabelWidth: '120px',
    optionflag: true,
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    query_api: {
      conditionnum: '1',
      condition: ['labor'],
      value: ['!="无"'],
      pagenum: '',
      companyid: ''
    }
  }),
  watch: {
    page: {
      handler(val) {
        this.ChangeDxzinfo({})
      },
      deep: true
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      getUsersInfo(this.query_api).then(data => {
        this.TableData_zzjg_zw = data
      })
      getGroupNum().then(data => {
        this.dxz_num = data
      })
      SelectZzmm().then(data => {
        this.category = data
      })
      getLaborArray().then(data => {
        this.laborArray = data
      })
      this.title = '添加人员信息'
      this.isEdit = true
    },
    handleEdit(row) {
      this.dialogFormVisible = true
      this.zzjg_form = Object.assign({}, row)
      this.title = '修改人员信息'
      this.isEdit = false
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.title = '添加人员信息'
      this.isEdit = true
      this.zzjg_form = {}
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.loading = true
      postZhiwei(this.zzjg_form)
        .then(data => {
          this.$message.success('添加成功')
          this.$notify.success('添加成功')
        })
        .finally(() => {
          this.loading = false
          this.refresh()
        })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    SetOptionflag(tab) {
      if (tab.index === '0') this.optionflag = true
      else {
        this.optionflag = false
        this.query_api.companyid = this.$store.state.zzxt.BrowserId
      }
    },
    ChangeDxzinfo(tab) {
      if (tab.index === '0') {
        this.query_api.condition = ['labor']
        this.query_api.value = ['!="无"']
        const page = this.page
        getUsersInfo(Object.assign(this.query_api, { page })).then(data => {
          this.TableData_zzjg_dxz = data.list
          this.totalCount = data.totalCount
        })
      } else {
        this.query_api.condition = ['groupnum']
        this.query_api.value = [tab.index]
        const page = this.page
        getUsersInfo(Object.assign(this.query_api, { page })).then(data => {
          console.log('Table changed!', data)
          this.TableData_zzjg_dxz = data.list
          this.totalCount = data.totalCount
        })
      }
    }
  }
}
</script>
